<template>
  <div class="search">
    <!-- banner -->
    <img src="../../assets/images/banner.png" alt="">

    <div class="white">
      <div class="box">
          <div class="breadcrumb-nav">
            <el-breadcrumb separator=">">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>智能搜索</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="tips-box">
            <img src="../../assets/images/jqr.png" alt="">
            <div class="tips-content">
              请在搜索框里提出您的问题，小T会尽我所能给您去找答案哦！
            </div>
          </div>

          <div class="search-form">
            <input type="text" name="" placeholder="请输入想要搜索的问题">
            <button type="button"><i class="el-icon-search"></i>搜索</button>
            <p>搜不到我的问题</p>
          </div>

          <div class="hots-records">
            热门问题：
            <el-tag>人工公寓申请</el-tag>
            <el-tag>政策兑现要多久</el-tag>
            <el-tag>人工公寓申请</el-tag>
            <el-tag>人工公寓申请</el-tag>
          </div>

          <p class="banner-title">热门知识点</p>

          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>
          <p class="item">
            人才公寓怎么申请
            <span>阅读量 123</span>
          </p>

          <div class="noRecord">
            <p><img src="../../assets/images/jqr.png" alt=""></p>
            <p>嗨崖，小T没找到答案吖 ~</p>
            <p>提交问题描述，来帮助小T不断进步吧 ！<a href="javascipt:void(0)">立即去帮忙</a></p>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import { } from '@/utils/js.js'
import {} from '@/services/api.js'
export default {
  components:{
    
  },
  data() {
    return {
      banner:[],
    }
  },
  mounted(){
    this.content()
  },
  computed:{
  },
  watch:{
    '$i18n.locale'(){
      this.content()
    },
  },
  methods:{
    content(){

    },
    //首页跳转
    indexLink(data){
     if(data.outLink && data.outLink==1){
        window.open(data.linkUrl,'-blank')
      }else{
        window.location.href = data.linkUrl
      }
    },
    
  }
}
</script>
<style lang="scss">

.search{
  .banner{
    img{display: block;}
    .el-carousel--button{
      width:12px;
      height:12px;
      background:rgba(255,255,255,1);
      border-radius:50%;
      opacity: 1;
    }
    .el-carousel--indicator.is-active button{
      background-color: #0F54BC;
    }
  }
  .noRecord{
    text-align: center;
    padding: 144px 0;
    border-top:1px solid rgba(204,204,204,1);
    p:first-child{
     text-align: center;
    }
     p:nth-child(2){
      margin-top: 25px;
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(153,153,153,1);
      opacity:1;
    }
    p:last-child{
      margin-top: 36px;
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(119,119,119,1);
      opacity:1;
      a{
        margin-left: 14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color:rgba(15,84,188,1);
        opacity:1;
        text-decoration:underline;
      }
    }
  }
  .white{
    background: #fff;
  }
  .box{
    box-sizing: border-box;
    width: 1200px;
    margin: 0 auto;
    .breadcrumb-nav{
      font-size:13px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(153,153,153,1);
      opacity:1;
      margin: 8px 0;
    }
    .tips-box{
      margin: 62px 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      .tips-content{
        margin-left: 17px;
        padding: 11px 12px;
        box-sizing: border-box;
        width:246px;
        height:59px;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 6px rgba(0,0,0,0.08);
        opacity:1;
        font-size:13px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:20px;
        color:rgba(102,102,102,1);
        opacity:1;
      }
    }

    .search-form{
       display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      input{
        padding: 19px 13px;
        box-sizing: border-box;
        width:942px;
        height:54px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(238,238,238,1);
        opacity:1;
        border-radius:4px;
      }
      button{
        width:96px;
        height:54px;
        background:rgba(15,84,188,1);
        opacity:1;
        border-radius:0px 4px 4px 0px;
        color: #fff;
        font-size:18px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:54px;
        outline: none;
        border: none;
        color:rgba(255,255,255,1);
        opacity:1;
        i{
          margin-right: 5px;
        }
      }
      p{
        margin-left: 10px;
        align-self: flex-end;
      }
    }
    .hots-records{
      margin: 10px 0;
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(102,102,102,1);
      opacity:1;
      .el-tag{
        height:30px;
        padding: 5px;
        background:rgba(15,84,188,0.05);
        border-radius:2px;
        font-size:12px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:20px;
        color:rgba(15,84,188,1);
        opacity:1;
        margin-right: 5px;
        border-radius: 3px;
      }
    }
    p.banner-title{
        margin-top: 35px;
        border-radius: 5px;
        height:46px;
        padding-left: 12px;
        box-sizing: border-box;
        background:rgba(204,204,204,0.16);
        font-size:14px;
        font-family:Microsoft YaHei;
        font-weight:400;
        line-height:46px;
        color:rgba(119,119,119,1);
        opacity:1;
    }
    p.item{
      padding: 20px 0 20px 12px;
      box-sizing: border-box;
      font-size:14px;
      font-family:Microsoft YaHei;
      font-weight:400;
      color:rgba(85,85,85,1);
      opacity:1;
      border-bottom: 1px solid rgba(204,204,204,1);;
      span{
        color:rgba(102,102,102,1);
        float: right;
        margin:0 37px;
      }
    }
    p.item::after{
      height: 0px;
      width: 100%;
      clear: both;
      content: "";
    }
    p.item:last-child{
     border-bottom: none;
    }
  }
}
</style>